<template>
<!-- 构建记录 -->
  <div class="box">
    <a-table
      bordered
      :columns="state.columns"
      :data-source="state.buildList"
      @change="tableChange"
      :pagination="state.pagination"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'operate'">
          <a-button
            size="small"
            type="primary"
            @click="run(record.id)"
            :disabled="record.result != '成功' || record.imageName.endsWith('(已删除)')"
            style="line-height: 26px;"
            >运行</a-button
          >
          <a-button v-if="record.buildNum !==0 && record.result != '已删除'" style="margin-left:10px;line-height: 26px;" type="primary" size="small" @click="showLog(record)" > 日志 </a-button>
        </template>
      </template>
    </a-table>
  </div>
  <a-drawer
    v-model:visible="state.logVisible"
     width="64%"
    title="构建日志"
    placement="right"
    @close = "logClose"
  >
    <pre v-html="state.logs"></pre>
  </a-drawer>
</template>



<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import { moduleBuildApi, moduleRunApi } from "@/api/devcloudApi";
import { message } from "ant-design-vue";
import { logIsEndStatus } from "@/util/devcloudUtils";

export default defineComponent({
  name: "buildRecord",
  components: {},
  props: {
    moduleId: {
      type: Number,
      required: false,
    },
  },
  emits: ["reloadModuleBuildRun", "addMonitorLog", "addDetailLog"],
  setup(props, ctx) {
    const { moduleId } = toRefs(props);

    const state = reactive({
      logVisible: false,
      logs:'',
      buildList: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
      query: {
        currentPage: 1,
        pageSize: 10,
        moduleId: moduleId.value,
      },
      columns: [
        {
          title: "构建时间",
          dataIndex: "createTime",
          key: "createTime",
          width: 180,
        },
        {
          title: "镜像名称",
          dataIndex: "imageName",
          key: "imageName",
          width: 420,
        },
        {
          title: "构建人",
          dataIndex: "createUsername",
          key: "createUsername",
          width: 120,
        },
        {
          title: "分支",
          dataIndex: "branch",
          key: "branch",
          width: 120,
        },
        {
          title: "结果",
          dataIndex: "result",
          key: "result",
          width: 120,
        },
        {
          title: "操作",
          dataIndex: "operate",
          key: "operate",
          width: 200,
        },
      ],
    });
    //--------------查询条件------------------------
    const initQuery = () => {
      state.query.pageSize = 10;
      state.query.currentPage = 1;
    }
    const sizeChange = (newSize: number) => {
      state.query.pageSize = newSize;
      page();
    }
    const currentChange = (newPage: number) => {
      state.query.currentPage = newPage;
      page();
    }

    const page = async () => {
      state.query.moduleId = moduleId.value;
      const res = await moduleBuildApi.page(state.query);
      if (res.success) {
        state.buildList = res.result;
        state.pagination.current = state.query.currentPage
        state.pagination.pageSize = state.query.pageSize
        state.pagination.total = res.count
      }
    }

    //--------------运行-----------------
    const run = async (buidId: number) => {
      const res = await moduleRunApi.start(buidId);
      if (res.success) {
        ctx.emit("reloadModuleBuildRun", moduleId.value);
        message.info("运行成功");
      }
    }
    
    const showLog = (item:any) =>{
      if(logIsEndStatus(item.result)){
        ctx.emit("addDetailLog", item.id);
      }else{
        ctx.emit("addMonitorLog", item.id, true);
      }
    }

    const logClose = () => {
      state.logs = ""
    }

    const tableChange = (pageInfo:any) => {
      state.query.currentPage = pageInfo.current
      state.query.pageSize = pageInfo.pageSize
      page()
    }

    const reflush = () =>{
      initQuery()
      page()
    }

    page()
    return {
      state,
      showLog,
      run,
      reflush,
      tableChange,
      logClose,
    }
  },
});
</script>

<style lang="less" scoped>
.box {
  margin: 0 20px;
}


pre {
    background: rgba(0, 0, 0, .8);
    color: #fff;
    padding: 15px 10px;
    font-size: 12px;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    *white-space: normal !important;
    height: 80vh !important;
    overflow: hidden;
    overflow-y: scroll;
    margin-top: 10px;
    
}
</style>